وب کامپوننت‌ها: ساخت عناصر قابل استفاده مجدد برای وب مدرن

در چشم انداز توسعه وب که به سرعت در حال تحول است، ایجاد کد ماژولار، قابل استفاده مجدد و قابل نگهداری از اهمیت بالایی برخوردار است. وب کامپوننت‌ها یک راه حل قدرتمند برای ساخت همین موارد ارائه می‌دهند: عناصر رابط کاربری سفارشی، کپسوله شده و قابل تعامل که می‌توانند در پروژه‌ها و فریم‌ورک‌های مختلف وب مورد استفاده قرار گیرند. این راهنمای جامع به بررسی مفاهیم اصلی وب کامپوننت‌ها، بررسی مزایای آن‌ها و ارائه مثال‌های عملی برای شروع کار می‌پردازد.

وب کامپوننت‌ها چیست؟

وب کامپوننت‌ها مجموعه‌ای از استانداردهای وب هستند که به شما امکان می‌دهند عناصر HTML سفارشی و قابل استفاده مجدد را با استایل و رفتار کپسوله شده ایجاد کنید. آنها اساساً به شما اجازه می‌دهند تا قابلیت‌های خود HTML را گسترش دهید و تگ‌های سفارشی بسازید که می‌توانند مانند هر عنصر استاندارد HTML دیگری رفتار شوند.

آنها را به عنوان آجرهای لگو برای وب در نظر بگیرید. هر آجر (وب کامپوننت) نشان دهنده یک قطعه خاص از عملکرد است و می‌توانید این آجرها را برای ساخت رابط‌های کاربری پیچیده ترکیب کنید. زیبایی وب کامپوننت‌ها در قابلیت استفاده مجدد و انزوا است. آنها می‌توانند در هر پروژه وب، صرف نظر از فریم‌ورک مورد استفاده (یا حتی بدون فریم‌ورک) استفاده شوند و استایل و رفتار داخلی آنها با بقیه برنامه شما تداخلی نخواهد داشت.

فناوری‌های اصلی وب کامپوننت‌ها

وب کامپوننت‌ها بر پایه چهار فناوری اصلی ساخته شده‌اند:

• عناصر سفارشی: به شما امکان می‌دهند عناصر HTML خود را تعریف کرده و رفتار آنها را مشخص کنید.
• سایه DOM: کپسوله سازی را برای استایل و نشانه گذاری عنصر فراهم می‌کند و از تداخل استایل با بقیه صفحه جلوگیری می‌کند.
• قالب‌های HTML: راهی برای تعریف ساختارهای HTML قابل استفاده مجدد فراهم می‌کنند که می‌توانند شبیه سازی و در DOM وارد شوند.
• واردات HTML (منسوخ شده): در حالی که از نظر فنی بخشی از مشخصات اصلی وب کامپوننت‌ها است، واردات HTML تا حد زیادی توسط ماژول‌های جاوا اسکریپت جایگزین شده است. ما بر استفاده از ماژول‌های مدرن جاوا اسکریپت تمرکز خواهیم کرد.

مزایای استفاده از وب کامپوننت‌ها

استفاده از وب کامپوننت‌ها در گردش کار توسعه شما مزایای متعددی را ارائه می‌دهد:

• قابلیت استفاده مجدد: وب کامپوننت‌ها در پروژه‌ها و فریم‌ورک‌های مختلف بسیار قابل استفاده مجدد هستند. هنگامی که یک کامپوننت را ایجاد کردید، می‌توانید به راحتی آن را در هر برنامه وب دیگری ادغام کنید.
• کپسوله سازی: سایه DOM کپسوله سازی عالی را فراهم می‌کند و از تداخل استایل و اسکریپت با بقیه صفحه جلوگیری می‌کند. این امر باعث می‌شود کامپوننت‌های شما قوی‌تر و نگهداری آنها آسان‌تر شود.
• قابلیت تعامل: وب کامپوننت‌ها مستقل از فریم‌ورک هستند. آنها می‌توانند با هر فریم‌ورک جاوا اسکریپت (React، Angular، Vue.js و غیره) یا حتی بدون فریم‌ورک استفاده شوند.
• قابلیت نگهداری: ماهیت ماژولار و کپسوله شده وب کامپوننت‌ها باعث می‌شود نگهداری و به‌روزرسانی آنها آسان‌تر شود. تغییرات در یک کامپوننت بر سایر قسمت‌های برنامه شما تأثیر نخواهد گذاشت.
• استانداردسازی: وب کامپوننت‌ها بر اساس استانداردهای وب ساخته شده‌اند و از سازگاری طولانی مدت و پشتیبانی مرورگر اطمینان حاصل می‌کنند.

یک مثال ساده: ایجاد یک عنصر شمارنده سفارشی

بیایید ایجاد یک وب کامپوننت اساسی را نشان دهیم: یک عنصر شمارنده سفارشی.

1. تعریف کلاس عنصر سفارشی

ابتدا، یک کلاس جاوا اسکریپت تعریف می‌کنیم که از کلاس `HTMLElement` گسترش می‌یابد.

            class MyCounter extends HTMLElement {
 constructor() {
 super();
 // Attach a shadow DOM to the element.
 this.attachShadow({ mode: 'open' });

 // Initialize the counter value.
 this._count = 0;

 // Create a button element.
 this.button = document.createElement('button');
 this.button.textContent = 'Increment';
 this.shadowRoot.appendChild(this.button);

 //Create a span element to display the count.
 this.span = document.createElement('span');
 this.span.textContent = `Count: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // Bind the increment method to the button click event.
 this.button.addEventListener('click', this.increment.bind(this));
 }

 increment() {
 this._count++;
 this.span.textContent = `Count: ${this._count}`;
 }

 connectedCallback() {
 console.log('Custom element connected to the DOM.');
 }

 disconnectedCallback() {
 console.log('Custom element disconnected from the DOM.');
 }

 adoptedCallback() {
 console.log('Custom element moved to a new document.');
 }

 attributeChangedCallback(name, oldValue, newValue) {
 console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}.`);
 }

 static get observedAttributes() {
 return ['count'];
 }
}

            

              
                Copy
              
            
          

2. تعریف سایه DOM

خط `attachShadow({ mode: 'open' })` یک سایه DOM را به عنصر متصل می‌کند. گزینه `mode: 'open'` به جاوا اسکریپت از بیرون اجازه می‌دهد تا به سایه DOM دسترسی پیدا کند، در حالی که `mode: 'closed'` از دسترسی خارجی جلوگیری می‌کند.

3. ثبت عنصر سفارشی

در مرحله بعد، عنصر سفارشی را با استفاده از روش `customElements.define()` در مرورگر ثبت می‌کنیم.

            customElements.define('my-counter', MyCounter);

            

              
                Copy
              
            
          

4. استفاده از عنصر سفارشی در HTML

اکنون می‌توانید از عنصر `` در HTML خود مانند هر عنصر HTML دیگری استفاده کنید.

            <my-counter></my-counter>

            

              
                Copy
              
            
          

این کد یک دکمه با برچسب "Increment" و یک دهانه را نشان می‌دهد که مقدار فعلی (شروع از 0) را نمایش می‌دهد. با کلیک بر روی دکمه، شمارنده افزایش یافته و صفحه نمایش به روز می‌شود.

غوطه وری عمیق تر: سایه DOM و کپسوله سازی

سایه DOM یک جنبه مهم از وب کامپوننت‌ها است. این با ایجاد یک درخت DOM جداگانه برای کامپوننت، کپسوله سازی را فراهم می‌کند و استایل و رفتار آن را از بقیه صفحه جدا می‌کند. این از تداخل سبک جلوگیری می‌کند و اطمینان می‌دهد که کامپوننت صرف نظر از محیط اطراف، به طور قابل پیش بینی رفتار می‌کند.

درون سایه DOM، می‌توانید استایل‌های CSS را تعریف کنید که فقط برای عناصر داخلی کامپوننت اعمال می‌شوند. این به شما امکان می‌دهد کامپوننت‌های مستقل ایجاد کنید که به شیوه نامه‌های CSS خارجی متکی نیستند.

مثال: استایل‌دهی سایه DOM

            constructor() {
 super();
 this.attachShadow({ mode: 'open' });

 // Create a style element for the shadow DOM
 const style = document.createElement('style');
 style.textContent = `
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 }
 span {
 margin-left: 10px;
 font-weight: bold;
 }
 `;
 this.shadowRoot.appendChild(style);

 // Initialize the counter value.
 this._count = 0;

 // Create a button element.
 this.button = document.createElement('button');
 this.button.textContent = 'Increment';
 this.shadowRoot.appendChild(this.button);

 //Create a span element to display the count.
 this.span = document.createElement('span');
 this.span.textContent = `Count: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // Bind the increment method to the button click event.
 this.button.addEventListener('click', this.increment.bind(this));
 }

            

              
                Copy
              
            
          

در این مثال، استایل‌های CSS تعریف شده در عنصر `style` فقط برای دکمه و عناصر دهانه در سایه DOM کامپوننت `my-counter` اعمال می‌شوند. این استایل‌ها بر روی دکمه‌ها یا دهانه‌های دیگر در صفحه تأثیر نمی‌گذارند.

قالب‌های HTML: تعریف ساختارهای قابل استفاده مجدد

قالب‌های HTML راهی برای تعریف ساختارهای HTML قابل استفاده مجدد فراهم می‌کنند که می‌توانند شبیه سازی و در DOM وارد شوند. آنها به ویژه برای ایجاد طرح بندی‌های پیچیده کامپوننت مفید هستند.

مثال: استفاده از قالب‌های HTML

            <template id="counter-template">
 <style>
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 }
 span {
 margin-left: 10px;
 font-weight: bold;
 }
 </style>
 <button>Increment</button>
 <span>Count: <span id="count-value">0</span></span>
</template>

<script>
class MyCounter extends HTMLElement {
 constructor() {
 super();
 this.attachShadow({ mode: 'open' });

 const template = document.getElementById('counter-template');
 const templateContent = template.content;
 this.shadowRoot.appendChild(templateContent.cloneNode(true));

 this.button = this.shadowRoot.querySelector('button');
 this.span = this.shadowRoot.querySelector('#count-value');
 this._count = 0;
 this.span.textContent = this._count;
 this.button.addEventListener('click', this.increment.bind(this));
 }

 increment() {
 this._count++;
 this.span.textContent = this._count;
 }
}

customElements.define('my-counter', MyCounter);
</script>

            

              
                Copy
              
            
          

در این مثال، یک الگوی HTML با ID `counter-template` تعریف می‌کنیم. این الگو شامل ساختار HTML و استایل‌های CSS برای کامپوننت شمارنده ما است. در داخل کلاس `MyCounter`، محتوای الگو را شبیه سازی می‌کنیم و آن را به سایه DOM اضافه می‌کنیم. این به ما امکان می‌دهد ساختار الگو را برای هر نمونه از کامپوننت `my-counter` مجدداً استفاده کنیم.

ویژگی‌ها و خواص

وب کامپوننت‌ها می‌توانند هم ویژگی و هم خصوصیات داشته باشند. ویژگی‌ها در نشانه گذاری HTML تعریف می‌شوند، در حالی که خواص در کلاس جاوا اسکریپت تعریف می‌شوند. تغییرات در ویژگی‌ها می‌توانند در خواص منعکس شوند و بالعکس.

مثال: تعریف و استفاده از ویژگی‌ها

            class MyGreeting extends HTMLElement {
 constructor() {
 super();
 this.attachShadow({ mode: 'open' });
 this.shadowRoot.innerHTML = `<p>Hello, <span id="name"></span>!</p>`;
 this.nameSpan = this.shadowRoot.querySelector('#name');
 }

 static get observedAttributes() {
 return ['name'];
 }

 attributeChangedCallback(name, oldValue, newValue) {
 if (name === 'name') {
 this.nameSpan.textContent = newValue;
 }
 }
}

customElements.define('my-greeting', MyGreeting);

            

              
                Copy
              
            
          

            <my-greeting name="World"></my-greeting>
<my-greeting name="Alice"></my-greeting>

            

              
                Copy
              
            
          

در این مثال، یک ویژگی `name` برای کامپوننت `my-greeting` تعریف می‌کنیم. گیرنده `observedAttributes` به مرورگر می‌گوید که کدام ویژگی‌ها را برای تغییرات نظارت کند. هنگامی که ویژگی `name` تغییر می‌کند، متد `attributeChangedCallback` فراخوانی می‌شود و ما محتوای عنصر `span` را با نام جدید به روز می‌کنیم.

فراخوانی‌های چرخه حیات

وب کامپوننت‌ها چندین فراخوانی چرخه حیات دارند که به شما امکان می‌دهند کد را در مراحل مختلف چرخه عمر کامپوننت اجرا کنید:

• connectedCallback(): زمانی که عنصر به DOM متصل می‌شود فراخوانی می‌شود.
• disconnectedCallback(): زمانی که عنصر از DOM جدا می‌شود فراخوانی می‌شود.
• adoptedCallback(): زمانی که عنصر به سند جدید منتقل می‌شود فراخوانی می‌شود.
• attributeChangedCallback(): زمانی که یک ویژگی از عنصر تغییر می‌کند فراخوانی می‌شود.

این فراخوانی‌ها فرصت‌هایی را برای انجام اولیه سازی، پاکسازی و سایر وظایف مربوط به چرخه عمر کامپوننت فراهم می‌کنند.

سازگاری مرورگر و پلی‌فیل‌ها

وب کامپوننت‌ها توسط همه مرورگرهای مدرن پشتیبانی می‌شوند. با این حال، مرورگرهای قدیمی‌تر ممکن است برای ارائه عملکرد لازم به پلی‌فیل‌ها نیاز داشته باشند. کتابخانه پلی‌فیل `webcomponents.js` پشتیبانی جامعی از وب کامپوننت‌ها در مرورگرهای قدیمی‌تر ارائه می‌دهد. برای وارد کردن پلی‌فیل، از تگ اسکریپت زیر استفاده کنید:

            <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.6.0/webcomponents-loader.js"></script>
            

              
                Copy
              
            
          

به طور کلی توصیه می‌شود از یک رویکرد تشخیص ویژگی استفاده کنید و فقط در صورتی که مرورگر به طور بومی از وب کامپوننت‌ها پشتیبانی نمی‌کند، پلی‌فیل را بارگیری کنید.

تکنیک‌های پیشرفته و بهترین شیوه‌ها

ترکیب کامپوننت

وب کامپوننت‌ها را می‌توان برای ایجاد عناصر UI پیچیده‌تر با هم ترکیب کرد. این به شما امکان می‌دهد برنامه‌های بسیار ماژولار و قابل استفاده مجدد ایجاد کنید.

مدیریت رویداد

وب کامپوننت‌ها می‌توانند رویدادهای سفارشی را ارسال و به آنها گوش دهند. این به کامپوننت‌ها اجازه می‌دهد تا با یکدیگر و با بقیه برنامه ارتباط برقرار کنند.

پیوند داده

در حالی که وب کامپوننت‌ها مکانیسم‌های پیوند داده داخلی را ارائه نمی‌دهند، می‌توانید پیوند داده را با استفاده از کد سفارشی یا با ادغام با یک کتابخانه پیوند داده پیاده سازی کنید.

دسترسی‌پذیری

مهم است اطمینان حاصل شود که وب کامپوننت‌های شما برای همه کاربران، از جمله افراد دارای معلولیت، قابل دسترسی هستند. هنگام طراحی و پیاده سازی کامپوننت‌های خود، بهترین شیوه‌های دسترسی‌پذیری را دنبال کنید.

وب کامپوننت‌ها در دنیای واقعی: مثال‌های بین‌المللی

وب کامپوننت‌ها توسط شرکت‌ها و سازمان‌ها در سراسر جهان برای ساخت رابط‌های کاربری مدرن و قابل استفاده مجدد استفاده می‌شوند. در اینجا چند نمونه آورده شده است:

• گوگل: به طور گسترده از وب کامپوننت‌ها در کتابخانه کامپوننت‌های Material Design خود استفاده می‌کند.
• Salesforce: از وب کامپوننت‌ها در فریم‌ورک Lightning Web Components خود استفاده می‌کند.
• SAP: از وب کامپوننت‌ها در فریم‌ورک Fiori UI خود استفاده می‌کند.
• مایکروسافت: با استفاده از FAST، یک فریم‌ورک مبتنی بر کامپوننت وب منبع باز، سیستم‌های طراحی را می‌سازد

اینها فقط چند نمونه از نحوه استفاده از وب کامپوننت‌ها در دنیای واقعی هستند. این فناوری با افزایش شناخت توسعه دهندگان از مزایای آن برای ساخت برنامه‌های وب ماژولار، قابل استفاده مجدد و قابل نگهداری، به طور فزاینده‌ای مورد پذیرش قرار می‌گیرد.

نتیجه گیری

وب کامپوننت‌ها یک رویکرد قدرتمند برای ساخت عناصر UI قابل استفاده مجدد برای وب مدرن ارائه می‌دهند. با استفاده از عناصر سفارشی، سایه DOM و قالب‌های HTML، می‌توانید کامپوننت‌های مستقلی ایجاد کنید که می‌توانند در پروژه‌ها و فریم‌ورک‌های مختلف استفاده شوند. پذیرش وب کامپوننت‌ها می‌تواند منجر به برنامه‌های وب ماژولارتر، قابل نگهداری و مقیاس پذیرتر شود. با تکامل استانداردهای وب، وب کامپوننت‌ها به ایفای نقش مهمی در شکل دادن به آینده توسعه وب ادامه خواهند داد.

یادگیری بیشتر

• مستندات وب کامپوننت‌های MDN
• WebComponents.org
• Lit: یک کتابخانه ساده برای ساخت وب کامپوننت‌های سریع و سبک.
• استنسیل: کامپایلری که وب کامپوننت‌ها را تولید می‌کند.

همین امروز آزمایش وب کامپوننت‌ها را شروع کنید و قدرت عناصر UI قابل استفاده مجدد را در پروژه‌های توسعه وب خود باز کنید!